<template>
	<view class="index">
		<view class="index-box">
			<view class="header">
				<view class="header-box">
					<view class="header-left"></view>
					<view class="header-right"></view>
				</view>
				<view class="search-box">
					<text class="search-left-icon"></text>
					<input class="search" type="text" @click="goSearch" placeholder="请输入要搜索的内容" />
					<text class="search-right-icon"></text>
				</view>
			</view>
			<view class="section">
				<view class="section-box">
					<view class="top-title">
						<view class="title-left">即时资讯</view>
						<view class="title-right" @click="goTrending">查看更多</view>
					</view>
					<view class="section-content" @click="goDetail(instantObj.id)">
						<view class="content-img-box">
							<image :src="`https://images.weserv.nl/?url=${instantObj.head_img}`" alt="">
						</view>
						<view class="content-writing">
							<view class="p-location">{{instantObj.tag}}</view>
							<view class="p-title">{{instantObj.title}}</view>
							<view class="p-come">
								<view class="p-come-left">
									<view class="p-person">
										<view class="person-icon">
											<image :src="instantObj.user_avators" mode="aspectFit"></image>
										</view>
										<text class="person">{{instantObj.media}}</text>
									</view>
									<view class="p-time">{{instantObj.publish_time}}</view>
								</view>
								<view class="p-come-right">
									<!-- <text class="come-right-icon"></text> -->
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="section-box">
					<view class="top-title">
						<view class="title-left">今日看点</view>
						<!-- <view class="title-right">查看更多</view> -->
					</view>

					<view class="big-uls">
						<view class="uls-box">
							<block v-for="item in getNavList" :key="item.id">
								<view class="li-box" @click="getHomeTodayLook(item)">
									<view class="nav-text">{{item.title}}</view>
									<view class="nav-underline" :class="navIndex==item.id?'active':''"></view>
								</view>
							</block>
						</view> 
					</view>

					<view class="section-list">
						<view class="ul-list">
							<block v-for="item in todayLookList" :key="'h' + item.id">
								<view class="li-list" @click="goDetail(item.id)">
									<view class="left-img">
										<image v-if="/.*thepaper.*/gi.test(item.head_img)"
											:src="`https://images.weserv.nl/?url=${item.head_img}`" mode="aspectFill">
										</image>
										<image v-else :src="`${item.head_img}`" mode="aspectFill"></image>
									</view>
									<view class="content-writing">
										<view class="p-location">{{item.tag}}</view>
										<view class="p-title">{{item.title}}</view>
										<view class="p-come">
											<view class="p-come-left">
												<view class="p-person">
													<view class="person-icon">
														<image :src="item.user_avators" mode="aspectFit">
														</image>
													</view>
													<text class="person">{{item.media}}</text>
												</view>
												<!-- <view class="p-time">{{item.publish_time}}</view> -->
											</view>
											<view class="p-come-right">
												<!-- <text class="come-right-icon"></text> -->
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNews,
		getTodyLook,
	} from "@/api/request"
	export default {
		data() {
			return {
				navIndex: 0,
				instantObj: {},
				todayLookList: [],
				getNavList: [{
						title: "时事",
						id: "0"
					},
					{
						title: "财经",
						id: "1"
					},
					{
						title: "思想",
						id: "2"
					},
					{
						title: "生活",
						id: "3"
					},
					{
						title: "历史",
						id: "4"
					},
					{
						title: "运动",
						id: "5"
					},
					{
						title: "娱乐",
						id: "6"
					},
					{
						title: "证券",
						id: "7"
					},
					{
						title: "科普",
						id: "8"
					},
					{
						title: "教育",
						id: "9"
					},
					{
						title: "汽车",
						id: "10"
					}
				]
			}
		},
		onLoad() {
			this.getIndexNews();
			this.getHomeTodayLook({
				id: 0,
				title: "时事"
			});
		},
		methods: {
			goTrending() {
				uni.navigateTo({
					url: "/pages/trending/trending"
				})
			},
			//去详情页
			goDetail(id) {
				// console.log(id);
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + id
				})
			},

			//去搜索页
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			getIndexNews() {
				let data = {}
				getNews(data).then(content => {
					// console.log("首页列表数据==>", content);
					let result = content.data
					let length = result.length
					let index = Math.floor(Math.random() * length + 1)
					this.instantObj = result[index]
					// console.log(index);
					// console.log(this.instantObj);
				})
			},
			getHomeTodayLook(item) {
				this.navIndex = item.id
				let data = {
					news_type: item.title
				}
				uni.showLoading({
					title: "加载中..."
				})
				// console.log(data);
				getTodyLook(data).then(content => {
					// console.log(content);
					if (content.code == 200) {
						this.todayLookList = content.content
						uni.hideLoading();
					}
				})
			}
		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		padding: 0 30rpx;
	}

	.index-box {
		position: relative;
		width: 100%;

		.header {
			z-index: 1;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			padding: 30rpx 30rpx 0;
			background-color: #fff;
		}

		// padding: 44rpx 0;
		.header-box {
			// border: 1px solid #000;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;


			.header-left {
				// width: 10%;
				width: 198rpx;
				height: 64rpx;
				// background-color: #000;
				background-image: url("@/static/newslogo.png");
				background-repeat: no-repeat;
				background-size: 100%;
			}

			.header-right {
				// width: 10%;
				width: 64rpx;
				height: 64rpx;
				// background-color: #000;
				background-image: url("@/static/image/message.png");
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}

		.search-box {
			position: relative;
			padding: 20rpx 0rpx;

			.search {
				height: 80rpx;
				padding: 20rpx 64rpx 20rpx 76rpx;
				// box-sizing: border-box;s
				border: 1px solid #A0A3BD;
				border-radius: 14rpx;
				font-size: 24rpx;
			}

			.search-left-icon,
			.search-right-icon {
				display: block;
				width: 48rpx;
				height: 48rpx;
				transform: translateY(-50%);
				position: absolute;
				top: 50%;
				// background-color: #000;
				background-repeat: no-repeat;
				background-size: 100%;
			}

			.search-left-icon {
				background-image: url("@/static/image/search.png");
				left: 20rpx;
			}

			.search-right-icon {
				background-image: url("@/static/image/set.png");
				right: 20rpx;

			}
		}

		.section{
			width: 100%;
			padding-top: 220rpx;
		}
		.section-box {
			width: 100%;
			padding: 15rpx 0 24rpx;
			// height: 500rpx;
			// border: 1px solid #000;

			.top-title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
			}

			.title-left {
				font-size: 32rpx;
				font-weight: bold;
			}

			.title-right {
				font-size: 28rpx;
				color: $uni-text-color-grey;
			}

			.section-content {
				width: 100%;
				padding: 0 10rpx 16rpx;
				// padding: 32rpx;
			}

			.content-img-box {
				// padding: 10rpx;
				width: 100%;
				height: 366rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content-writing {
				width: 100%;

				.p-location {
					padding-top: 10rpx;
					font-size: 28rpx;
					color: $uni-text-color-grey;
				}

				.p-title {
					padding: 16rpx 0 14rpx 0;
					font-size: 32rpx;
					color: #000;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.p-come {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.p-come-left {
					display: flex;
					// align-items: center;
					align-items: flex-end;
				}

				.p-person {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}


				.person-icon {
					display: block;
					width: 40rpx;
					height: 40rpx;
					border: 1px solid #e5e5e5;
					// background-color: #000;
					// background-image: url("@/static/image/newslogo/pengpai.png");
					// background-repeat: no-repeat;
					// background-size: 100%;
					border-radius: 50%;
					margin-right: 5rpx;

					image {
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}

				.person {
					padding-left: 5rpx;
					font-size: 28rpx;
					color: #4e4b46;
					font-weight: bold;
				}

				.p-time {
					padding-left: 10rpx;
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}

				.p-come-right {
					width: 40rpx;
					height: 40rpx;
					// background-color: #000;
					background-image: url("@/static/image/more.png");
					background-repeat: no-repeat;
					background-size: 100%;
				}
			}

		}

		.big-uls {
			width: 100%;
			// padding: 20rpx 0 0;

			.uls-box {
				width: 100%;
				display: flex;
				white-space: nowrap;
				overflow: scroll;
				align-items: center;

				.li-box {
					display: inline-block;
					margin-right: 20px;
					width: 100rpx;
					color: #000;
				}

				.nav-text {
					padding-bottom: 20rpx;
				}

				.nav-underline {
					margin: 0 auto;
					width: 20rpx;
					height: 4rpx;
					background-color: transparent;
					transition: width 0.2s;

					&.active {
						width: 50rpx;
						background-color: #1877F2;
					}
				}
			}

			::-webkit-scrollbar {
				display: none
			}
		}

		.section-list {
			// border: 1px solid #000;
			margin-top: 30rpx;
			width: 100%;
			// height: 500rpx;

			.li-list {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.left-img {
					width: 192rpx;
					height: 192rpx;

					image {
						border-radius: 10rpx;
						width: 100%;
						height: 100%;
					}
				}

				.content-writing {
					flex: 1;
					padding: 0 10rpx;

					.p-title {

						height: 106rpx;
						overflow: hidden;
						// text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						display: -webkit-box;
					}
				}
			}
		}
	}
</style>